<template>
	<view>
		<block v-if="value.message_type == 0 || value.message_type == 1 || value.message_type == 3">
			<u-parse :show-with-animation="true" :tag-style="{img:'max-width:160px;max-height:160px;'}" :selectable="true" :html="value.message.html"></u-parse>
		</block>
		<block v-else-if="value.message_type == 2">
			<view class="file-message" @click="url(value.message.original.url, '下载地址')">
				<image class="file-suffix" :src="value.suffixImg"></image>
				<view class="file-message-box">
					<view class="file-name">{{value.message.original.ext}}文件</view>
					<view class="file-size">{{value.message.original.size}}</view>
				</view>
				<view class="down-file">
					<u-button type="primary" @click="url(value.message.original.url, '下载地址')" size="mini">下载</u-button>
				</view>
			</view>
		</block>
		<block v-else-if="value.message_type == 4">
			<view class="confidential">
				<text v-if="confidential">{{confidential}}</text>
				<block v-else>
					<text>机密信息已隐藏</text>
					<u-button @click="showConfidential(value.id)" type="primary" size="mini">查看</u-button>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"message",
		props: {
			value: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				confidential: false
			};
		},
		methods: {
			url: function (url, title = '链接') {
				// #ifdef H5
				window.open(url);
				return;
				// #endif
				
				uni.setClipboardData({
				    data: url,
				    success: function () {
						uni.showToast({
							title: title + '已复制到剪切板,请在浏览器中打开',
							icon: 'none'
						})
				    }
				});
			},
			showConfidential: function (id) {
				this.$u.api.showConfidential({
					id: id
				}).then(res => {
					this.confidential = res.data.message
				})
			}
		}
	}
</script>

<style>
.file-message {
	height: 100rpx;
	display: flex;
	align-items: center;
}
.file-message view {
	margin: 6px 0 0 6px;
	font-size: 28rpx;
}
.file-message .file-name {
	font-weight: bold;
	margin: 0;
	color: #1A1A1A;
}
.file-message .file-size {
	margin: 0;
	color: #999999;
}
.file-suffix {
	width: 100rpx !important;
	height: 100rpx !important;
	padding: 8rpx;
}
.file-message .down-file {
	font-size: 12px;
	padding: 0 10px;
}
.confidential {
	font-size: 28rpx;
	color: #999999;
}
.confidential text {
	margin-right: 10rpx;
}
</style>
